// ComponentButton.tsx
import classNames from 'classnames';
import React, { useEffect } from 'react';
import { useDrag } from 'react-dnd';

interface ComponentButtonProps {
    title: string;
    name:string
    icon?: React.ReactNode;
    desc:string
}

export enum DragMethod {
    ADD = 'add',
    MOVE = 'move'
} 

const ComponentButton: React.FC<ComponentButtonProps> = ({ title, icon ,name,desc}) => {

    const cls = classNames(['iconfont ', icon]);
    const ref = React.useRef<HTMLDivElement>(null);
    // 组件拖拽
    const [_, drag] = useDrag({
        type: name,
        item: {
            type: name,
            desc,
            id: new Date().getTime(),
            method:DragMethod.ADD
        },
        collect(monitor) {
        },
    })

    useEffect(() => {
        drag(ref)
    }, [])

    return (
        <div className="component-button" ref={ref}>
            <div className="button-inner">
                {
                    icon && <i className={cls}></i>
                }
                <span className="button-text">{title}</span>
            </div>
        </div>
    );
};

export default ComponentButton;
